<template>
	<view>
		<scroll-view scroll-y
		:style="{'height': scrollViewHeight + 'px','padding-bottom': scrollViewBottom + 'px','padding-top': scrollViewTop + 'px','box-sizing': 'border-box'}">
			<graphic-item :graphic="graphic" v-if="isReady" @clickInput="clickInput" @likeFun="likeFun" @clickVideo="clickVideo"/>
			<view class="comment-block" v-if="isReady">
				<block v-for="(item, index) in commentList" :key="index">
					<comments :comments="item" 
					@clickReplayComment="clickReplayComment" 
					:commentsIndex="index"
					@clickComment="clickReplayComment"
					@clickAttention="clickAttention"></comments>
				</block>
			</view>
			<view class="no-comment" v-if="isReady && !commentList.length > 0">
				暂无评论！快来抢占沙发吧~
			</view>
		</scroll-view>
		<fun-comment-input v-if="showInput" @inputBlur="inputBlur" @clickSend="clickSend"
		@inputOnFocus="inputOnFocus"
		@linechange="linechange"></fun-comment-input>
	</view>
</template>

<script>
	import GraphicItem  from "@/components/funScrollView/Graphic-item.vue";
	import comments from '@/components/comments/comments.vue';
	import chatInput from '@/components/chatInput/chatInput.vue';
	import {TheFun} from '@/model/theFun.js';
	import {Comment} from '@/model/comment.js';
	import funCommentInput from '@/components/chatInput/funCommentInput.vue';
	export default {
		data() {
			return {
				graphic:{},
				isReady:false,
				commentList:[],
				showInput:false,
				commentContent:'',
				commentsIndex:0,
				comment:{
					commentLevel: 1,
					parentId: 0,
					funId: 0,
					toUid: '',
					toNickname: '',
					commentContent: '',
					avatarUrl:''
				},
				scrollViewHeight:500,
				scrollViewBottom:0,
				scrollViewTop:0,
				oldBottom:0,
				scrollIndex:0,
				likeClick:false,
			}
		},
		onLoad() {
			let res = uni.getSystemInfoSync()
			this.scrollViewHeight = res.windowHeight - uni.upx2px(20)
			const eventChannel = this.getOpenerEventChannel()
			eventChannel.on('acceptDataFromOpenerPage', e=> {
				console.log(e)
				this.scrollIndex =  e.scrollIndex
				this.getFunDetail(e.data)
				this.getComments(e.data)
			})
		},
		components:{
			GraphicItem,
			chatInput,
			funCommentInput
		},
		onUnload() {
			if(!this.scrollIndex){
				uni.$emit("refreshDynamic",{dataId:this.graphic.id})
				uni.$off("refreshDynamic")
				return
			}
			uni.$emit("refresh",{dataId:this.graphic.id,scrollIndex:this.scrollIndex})
			uni.$off("refresh")
		},
		methods: {
			async getFunDetail(id){
				uni.showLoading({
					mask:true,
					title:"加载中..."
				})
				let res = await TheFun.getFunDetail({funId:id})
				uni.hideLoading()
				if(res.code != 200){
					uni.showToast({
						icon:'none',
					    title: res.message,
					    duration: 2000
					});
					return
				}
				this.graphic = res.data
				this.isReady = true
				console.log(this.graphic)
			},
			async getComments(id){
				let res = await Comment.getCommentList({funId:id})
				if(res.code != 200){
					uni.showToast({
						icon:'none',
					    title: res.message,
					    duration: 2000
					});
					return
				}
				this.commentList = res .data
				console.log(this.commentList)
			},
			async addcomment(param){
				uni.showLoading({
					mask:true,
					title:"加载中..."
				})
				let res = await Comment.addComment(param)
				uni.hideLoading()
				if(res.code != 200){
					uni.showToast({
						icon:'none',
					    title: res.message,
					    duration: 2000
					});
					return
				}
				uni.showToast({
					icon:'none',
				    title: "评论成功",
				    duration: 2000
				});
				if(param.commentLevel == 1){
					this.commentList.unshift(res.data)
					return
				}
				this.commentList[this.commentsIndex].childList.unshift(res.data)
			},
			clickInput(e){
				// console.log(e)
				this.comment.commentLevel = 1
				this.comment.parentId = 0
				this.comment.toUid = ''
				this.comment.toNickname = ''
				this.comment.commentContent = ''
				this.comment.funId = e.id
				this.showInput = true
				
			},
			inputOnFocus(e){
				this.scrollViewTop = e.detail.height
				this.scrollViewBottom = uni.upx2px(100)
			},
			linechange(e){
				if(e.height > 120)
					return
				this.scrollViewBottom = this.oldBottom + e.height
			},
			inputBlur(){
				this.scrollViewTop = 0
				this.scrollViewBottom = 0
				setTimeout(e=>{
					this.showInput = false
				}, 100)
			},
			clickSend(e){
				this.comment.commentContent = e
				this.addcomment(this.comment)
			},
			clickReplayComment(e){
				this.commentsIndex = e.commentsIndex
				if(e.reComments.commentLevel == 1){
					this.comment.commentLevel = 2
					this.comment.parentId = e.reComments.id
					this.comment.toUid = e.reComments.uid
					this.comment.toNickname = e.reComments.nickName
					this.comment.funId = e.reComments.shareId ? e.reComments.shareId : e.reComments.funId
				}else{
					this.comment.commentLevel = 3
					this.comment.parentId = e.reComments.parentId
					this.comment.toUid = e.reComments.uid
					this.comment.toNickname = e.reComments.nickName
					this.comment.funId = e.reComments.funId
				}
				this.showInput = true
			},
			async likeFun(e){
				if(this.likeClick)
					return
				this.likeClick = true
				if(this.graphic.isClick){
					let res = await TheFun.likeFun({
						id:this.graphic.id,
						clickType:2,
						funOrTopic:1
					})
					this.likeClick = false
					if(res.code == 200){
						this.graphic.isClick = false
						this.graphic.likeNum -= 1
						return
					}
					uni.showToast({
						icon:'none',
					    title: res.message,
					    duration: 2000
					});
					return
				}
				let res = await TheFun.likeFun({
					id:this.graphic.id,
					clickType:1,
					funOrTopic:1
				})
				this.likeClick = false
				if(res.code == 200){
					this.graphic.isClick = true
					this.graphic.likeNum += 1
					return
				}
				uni.showToast({
					icon:'none',
				    title: res.message,
				    duration: 2000
				});
			},
			clickAttention(uid){
				console.log(uid)
			},
			clickVideo(e){
				uni.$on("getVideoInfo",c=>{
					c.fun(e)
				})
				uni.navigateTo({
					url:'../../pages/detailVideo/detailVideo',
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', { graphic: e })
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.comment-block{
		margin: 20rpx;
	}
	.no-comment{
		padding: 100rpx 0;
		font-size: 40rpx;
		color: #999999;
		text-align: center;
	}
</style>
